<template>
	<view>
		<uv-tabbar :value="curr" zIndex="1000" placeholder :border="false" iconSize="36rpx" active-color="#2775b6" :customStyle="csStyle" @change="tabbarChange">
			<uv-tabbar-item text="资讯" icon="photo"></uv-tabbar-item>
			<uv-tabbar-item text="频道" icon="photo"></uv-tabbar-item>

			<!-- Index: 2 中间页 tabbar 导航 -->
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon style="height: 18px; overflow: hidden">
					<image class="icon" :src="HomeIcon"></image>
					<!-- Icon占位符 主图脱离时撑开文字用 -->
					<view class="icon-placehoder"></view>
				</template>
				<template v-slot:inactive-icon style="height: 18px; overflow: hidden">
					<image class="icon" :src="HomeIcon"></image>
					<!-- Icon占位符 主图脱离时撑开文字用 -->
					<view class="icon-placehoder"></view>
				</template>
			</uv-tabbar-item>

			<uv-tabbar-item text="活动" icon="play-right"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
import { pageList } from './pageList';
export default {
	data() {
		return {
			csStyle: {
				boxShadow: '0 1px 16rpx #fafafa'
			},
			HomeIcon:
				''
		};
	},
	computed: {
		curr() {
			let currPage = getCurrentPages()[getCurrentPages().length - 1];
			let currIndex = pageList.findIndex((item) => item === currPage.route); // 查找是哪个页面
			this.$store.commit('tabbar/setCurr', currIndex);
			return this.$store.state.tabbar.curr;
		}
	},
	methods: {
		// 切换tabbar 可拦截
		tabbarChange(idx) {
			let that = this,
				currPage;
			currPage = getCurrentPages()[getCurrentPages().length - 1];
			if (currPage.route === pageList[idx]) return; // 当前路由与页面地址相同不做操作，防止重跳当前页
			// 切换时拦截
			if (idx == 0) {
				// 切换第一个tabbar时拦截，index顺序从左到右
				uni.showToast({
					title: '权限不足',
					icon: 'error'
				});
				return;
				// 即使示例 pageList 中页面路径不存在也会被拦截下来
			}
			// 跳转到tabbar页面
			uni.reLaunch({
				url: `/${pageList[idx]}`,
				success() {
					that.$store.commit('tabbar/setCurr', idx);
				},
				fail() {
					uni.showModal({
						title: 'Warning',
						content: '404 Not Found',
						showCancel: false
					});
				}
			});
			return;
		}
	}
};
</script>

<style lang="scss" scoped>
.icon {
	width: 45px;
	height: 45px;
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translate(-50%);
}

.icon-placehoder {
	width: 0;
	margin: 0;
	padding: 0;
	/* #ifdef H5 */
	height: 35rpx;
	/* #endif */
	/* #ifdef MP */
	height: 0;
	/* #endif */
}
</style>
